<template>
	<uv-tabbar :value="value" activeColor="#4acfbf" @change="(index) => changeIndex(index)">
		<uv-tabbar-item text="医学头条" >
			<template v-slot:active-icon>
				<image class="icon" src="@/static/images/tabbar/home_.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="@/static/images/tabbar/home.png"></image>
			</template>
		</uv-tabbar-item>
		<uv-tabbar-item text="我的" >
			<template v-slot:active-icon>
				<image class="icon" src="@/static/images/tabbar/user_.png"></image>
			</template>
			<template v-slot:inactive-icon>
				<image class="icon" src="@/static/images/tabbar/user.png"></image>
			</template>
		</uv-tabbar-item>
	</uv-tabbar>
</template>

<script setup lang="ts">
import { ref, defineProps, watch, onMounted } from 'vue';

const value = ref(0);
const props = defineProps<{ currentIndex: number }>();
const changeIndex = (index: number) => {
	value.value = index;
	console.log('Tab index changed to:', index);

	switch (value.value) {
		case 0:
			uni.redirectTo({ url: '/pages/doctor/home/index' });
			break;
		case 1:
			uni.redirectTo({ url: '/pages/doctor/userInfo/index' });
			break;
		default:
			uni.redirectTo({ url: '/pages/doctor/home/index' });
			break;
	}
};
onMounted(() => {
	value.value = props.currentIndex
})
</script>

<style lang="scss" scoped>
.icon {
	width: 40rpx;
	height: 40rpx;
}
</style>
